<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue';

const props = defineProps({
  enterAction: {
    type: Object,
    required: true
  }
});

// 尺子方向
const direction = ref('horizontal'); // horizontal, vertical, free
// 尺子大小
const sizeType = ref('fixed'); // fixed, fullscreen, custom
// 尺子单位
const unit = ref('cm'); // cm, inch, px
// 自定义尺寸
const customWidth = ref(300);
const customHeight = ref(50);
// 固定尺寸
const fixedWidth = 500;
const fixedHeight = 50;
// 屏幕尺寸
const screenWidth = ref(window.innerWidth);
const screenHeight = ref(window.innerHeight);
// 像素密度 (DPI)
const dpi = ref(96); // 默认DPI值
// 旋转角度 (自由模式)
const rotation = ref(0);
// 控制面板显示状态
const showControls = ref(true);

// 计算尺子实际尺寸
const rulerWidth = computed(() => {
  if (sizeType.value === 'fullscreen') {
    return direction.value === 'vertical' ? fixedHeight : screenWidth.value;
  } else if (sizeType.value === 'custom') {
    return direction.value === 'vertical' ? customHeight.value : customWidth.value;
  } else {
    return direction.value === 'vertical' ? fixedHeight : fixedWidth;
  }
});

const rulerHeight = computed(() => {
  if (sizeType.value === 'fullscreen') {
    return direction.value === 'vertical' ? screenHeight.value : fixedHeight;
  } else if (sizeType.value === 'custom') {
    return direction.value === 'vertical' ? customHeight.value : customWidth.value;
  } else {
    return direction.value === 'vertical' ? fixedWidth : fixedHeight;
  }
});

// 计算刻度间距
const tickSpacing = computed(() => {
  if (unit.value === 'cm') {
    return dpi.value / 2.54; // 1厘米对应的像素数
  } else if (unit.value === 'inch') {
    return dpi.value; // 1英寸对应的像素数
  } else {
    return 10; // 每10像素一个刻度
  }
});

// 计算单位标签
const unitLabel = computed(() => {
  if (unit.value === 'cm') {
    return '厘米';
  } else if (unit.value === 'inch') {
    return '英寸';
  } else {
    return '像素';
  }
});

// 检测屏幕DPI
const detectDPI = () => {
  const div = document.createElement('div');
  div.style.width = '1in';
  div.style.height = '1in';
  div.style.position = 'absolute';
  div.style.left = '-100%';
  div.style.top = '-100%';
  document.body.appendChild(div);
  const detected = div.offsetWidth;
  document.body.removeChild(div);
  dpi.value = detected || 96;
};

// 窗口大小变化时更新屏幕尺寸
const updateScreenSize = () => {
  screenWidth.value = window.innerWidth;
  screenHeight.value = window.innerHeight;
};

// 绘制尺子
const canvasRef = ref(null);
const drawRuler = () => {
  const canvas = canvasRef.value;
  if (!canvas) return;
  
  const ctx = canvas.getContext('2d');
  const width = rulerWidth.value;
  const height = rulerHeight.value;
  
  // 设置canvas尺寸
  canvas.width = width;
  canvas.height = height;
  
  // 清空画布
  ctx.clearRect(0, 0, width, height);
  
  // 设置样式
  ctx.fillStyle = '#f5f5f5';
  ctx.fillRect(0, 0, width, height);
  ctx.strokeStyle = '#333';
  ctx.fillStyle = '#333';
  ctx.font = '10px Arial';
  
  const spacing = tickSpacing.value;
  const isVertical = direction.value === 'vertical';
  
  // 绘制刻度
  if (isVertical) {
    // 垂直尺子
    const rulerLength = height;
    
    // 绘制主轴线
    ctx.beginPath();
    ctx.moveTo(height / 2, 0);
    ctx.lineTo(height / 2, rulerLength);
    ctx.stroke();
    
    // 绘制刻度
    for (let i = 0; i < rulerLength; i += spacing / 10) {
      const y = i;
      let tickLength;
      
      if (i % spacing === 0) {
        // 主刻度
        tickLength = 15;
        const value = Math.floor(i / spacing);
        ctx.fillText(value.toString(), 5, y + 3);
      } else if (i % (spacing / 2) === 0) {
        // 半刻度
        tickLength = 10;
      } else {
        // 小刻度
        tickLength = 5;
      }
      
      ctx.beginPath();
      ctx.moveTo(height / 2, y);
      ctx.lineTo(height / 2 - tickLength, y);
      ctx.stroke();
    }
  } else {
    // 水平尺子
    const rulerLength = width;
    
    // 绘制主轴线
    ctx.beginPath();
    ctx.moveTo(0, height / 2);
    ctx.lineTo(rulerLength, height / 2);
    ctx.stroke();
    
    // 绘制刻度
    for (let i = 0; i < rulerLength; i += spacing / 10) {
      const x = i;
      let tickLength;
      
      if (i % spacing === 0) {
        // 主刻度
        tickLength = 15;
        const value = Math.floor(i / spacing);
        ctx.fillText(value.toString(), x - 3, height / 2 - 20);
      } else if (i % (spacing / 2) === 0) {
        // 半刻度
        tickLength = 10;
      } else {
        // 小刻度
        tickLength = 5;
      }
      
      ctx.beginPath();
      ctx.moveTo(x, height / 2);
      ctx.lineTo(x, height / 2 - tickLength);
      ctx.stroke();
    }
  }
  
  // 绘制单位标签
  ctx.font = '12px Arial';
  ctx.fillText(unitLabel.value, 10, 20);
};

// 监听变化并重绘
watch([direction, sizeType, unit, customWidth, customHeight, rotation], () => {
  drawRuler();
});

// 关闭窗口
const closeWindow = () => {
  if (window.utools) {
    window.utools.hideMainWindow();
  }
};

onMounted(() => {
  detectDPI();
  updateScreenSize();
  drawRuler();
  
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    updateScreenSize();
    drawRuler();
  });
  
  // 设置窗口始终置顶
  if (window.utools && window.utools.setWindowAlwaysOnTop) {
    window.utools.setWindowAlwaysOnTop(true);
  }
});
</script>

<template>
  <div class="ruler-container" :style="{
    transform: direction === 'free' ? `rotate(${rotation}deg)` : '',
    width: `${rulerWidth}px`,
    height: `${rulerHeight}px`
  }">
    <canvas ref="canvasRef"></canvas>
    
    <button class="toggle-controls" @click="showControls = !showControls">
      {{ showControls ? '隐藏控制' : '显示控制' }}
    </button>
    
    <button class="close-button" @click="closeWindow">
      关闭
    </button>
    
    <div class="controls" v-show="showControls">
      <div class="control-group">
        <label>方向：</label>
        <select v-model="direction">
          <option value="horizontal">水平</option>
          <option value="vertical">垂直</option>
          <option value="free">自由</option>
        </select>
      </div>
      
      <div class="control-group">
        <label>大小：</label>
        <select v-model="sizeType">
          <option value="fixed">固定</option>
          <option value="fullscreen">全屏</option>
          <option value="custom">自定义</option>
        </select>
      </div>
      
      <div class="control-group" v-if="sizeType === 'custom'">
        <label>宽度：</label>
        <input type="number" v-model="customWidth" @change="drawRuler" />
        <label>高度：</label>
        <input type="number" v-model="customHeight" @change="drawRuler" />
      </div>
      
      <div class="control-group">
        <label>单位：</label>
        <select v-model="unit">
          <option value="cm">厘米</option>
          <option value="inch">英寸</option>
          <option value="px">像素</option>
        </select>
      </div>
      
      <div class="control-group" v-if="direction === 'free'">
        <label>旋转：</label>
        <input type="range" v-model="rotation" min="0" max="360" @input="drawRuler" />
        <span>{{ rotation }}°</span>
      </div>
    </div>
  </div>
</template>

<style>
.ruler-container {
  position: relative;
  margin: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100vh;
  width: 100vw;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.controls {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 10;
  backdrop-filter: blur(5px);
  transition: opacity 0.3s ease;
}

.control-group {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

select, input {
  padding: 3px;
  border: 1px solid #ccc;
}

input[type="range"] {
  width: 100px;
}

.toggle-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  font-size: 12px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background: rgba(255, 0, 0, 0.1);
  color: #d00;
  border: 1px solid #d00;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  font-size: 12px;
  transition: all 0.2s ease;
}

.close-button:hover {
  background: rgba(255, 0, 0, 0.2);
}
</style>